<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    宏任务-微任务-渲染，然后重复
    执行一个宏任务（栈中没有就从事件队列中获取）
    执行过程中如果遇到微任务就将它添加到微任务列队中
    宏任务执行完毕后，立即执行当前的微任务队列中的所有微任务(依次执行)
    当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
    渲染完毕后，JS线程继续接管，开始下一个宏任务(从事件队列中获取)

    事件循环机制
    主线程运行的时候，会产生堆和栈。栈中的代码会调用各种外部 API。他们在任务队列中加入各种事件。只要栈中的代码执行完毕，主线程就会去读取“任务列队”，依次执行哪些事件所对应的回调函数。主线程从“任务队列”中读取事件，这个过程是循环不断的。所以叫事件循环机制。
</body>
</html>